<!--录屏-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="start">开始录制</button>
    <button id="stop">停止录制</button>
<script>
    const start = document.getElementById('start');
    const stop = document.getElementById('stop');
    let recorder;
    start.addEventListener('click', ev => {
        navigator.mediaDevices.getDisplayMedia({video: true, audio: true}).then(stream => {
            recorder = new MediaRecorder(stream);
            let data = [];
            recorder.ondataavailable = function (e) {
                data.push(e.data);
            };
            recorder.stop = function () {
                this.stream.getTracks().forEach(track => track.stop());
                let blob = new Blob(data, {type: this.mimeType});
                let link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = Date.now() + '.webm';
                document.body.append(link);
                link.click();
                URL.revokeObjectURL(link.href);
                link.remove()
            }
            recorder.start()
        })
    })
    stop.addEventListener('click',ev => {
        recorder.stop()
    })
</script>
</body>
</html>